<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table class="table table-striped">
        <caption>收货地址列表</caption>
        <thead>
            <tr>
                <th>地址类型</th>
                <th>收货人姓名</th>
                <th>详细地址</th>
                <th>联系电话</th>
                <th colspan="3">操作</th>
            </tr>
        </thead>
        <tbody id="address-list">
            <tr>
                <td>家</td>
                <td>八戒</td>
                <td>北京市房山区高老庄3排6号</td>
                <td>1380***1234</td>
                <td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>
                <td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 删除</a></td>
                <td><a class="btn btn-xs add-def btn-default">设为默认</a></td>
            </tr>
            <tr>
                <td>公司</td>
                <td>八戒</td>
                <td>北京市海淀区中关村中路1号1001室</td>
                <td>1380***1234</td>
                <td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>
                <td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 删除</a></td>
                <td><a class="btn btn-xs add-def btn-default">设为默认</a></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            showAddressList();
        });
        function showAddressList() {
            $("#address-list").empty();//清除原来的列表内容
            $.ajax({
                url: "/addresses",
                // data: "",//客户端发送的数据
                dataType: "JSON",//服务器响应的数据类型
                success: function (json) {
                    let list = json.data;
                    for (let i = 0; i < list.length; i++) {
                        //先写一对单引号''，再把内容拷贝到括号中会自动生成模板
                        let address = '<tr>' +
                            '<td>#{tag}</td>' +
                            '<td>#{name}</td>' +
                            '<td>#{province}#{city}#{area}#{address}</td>' +
                            '<td>#{phone}</td>' +
                            '<td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>\n' +
                            '<td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 删除</a></td>\n' +
                            '<td><a class="btn btn-xs add-def btn-default">设为默认</a></td>\n' +
                            '</tr>';
                        //#{XXX}相当于是占位符
                        //使用replace()替换#{}中的内容
                        address = address.replace("#{tag}", list[i].tag);
                        address = address.replace("#{name}", list[i].name);
                        address = address.replace("#{province}", list[i].province);
                        address = address.replace("#{city}", list[i].city);
                        address = address.replace("#{area}", list[i].area);
                        address = address.replace("#{address}", list[i].address);
                        address = address.replace("#{phone}", list[i].phone);
                        $("#address-list").append(address);
                    }
                    $(".add-def:eq(0)").hide();//隐藏已经是默认收货地址，的默认收货按钮
                }
            });
        };
    </script>
</body>

</html>